@cubeHeight:`document.documentElement.clientHeight-40`;
@cubeWidth:`document.documentElement.clientWidth`;
@contentHeight:`document.documentElement.clientHeight-150`;
@contentWidth:`(document.documentElement.clientHeight-250)/2*3`;
@sideHeight:`(document.documentElement.clientHeight-40)/2`;
@webcontainerHeight:`(document.documentElement.clientHeight-40)`;

.borderRadius(@radius:20px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -o-border-radius:@radius;
    -ms-border-radius:@radius;
    border-radius:@radius;
}
#webcontainer {
  position: absolute;
  left: 0px;
  top: 40px;
  width:100%;
  height: ~`@{cubeHeight}+'px'`;
  width: ~`@{cubeWidth}+'px'`;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#cube {
  display: block;
  position: relative;
  left: 0px;
  top: 0px;
  height: ~`@{cubeHeight}+'px'`;
  width: ~`@{cubeWidth}+'px'`;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#gallery_side {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(20, 20, 20, 1);
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#location_side {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(20,20, 20, 1);
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.side_hide{
  -webkit-transform:scale(0,0);
  -moz-transform:scale(0,0);
  -o-transform:scale(0,0);
  transform:scale(0,0);
  opacity:0;
}
.side_show {
  -webkit-transform:scale(1,1);
  -moz-transform:scale(1,1);
  -o-transform:scale(1,1);
  transform:scale(1,1);
  opacity:1;
}

#gallayContainer {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: absolute;
    overflow: hidden;
}

.gallery_map{
  position:relative;
  width:200px;
  height:200px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -o-border-radius:50%;
  -ms-border-radius:50%;
  border-radius:50%;
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  -ms-transition:.5s;
  transition:.5s;
  left:10px;
  top:10px;
}

.gallery_map:hover{
  -webkit-box-shadow:0 0 20px rgba(255,255,255,.6),inset 0 0 20px rgba(255,255,255,1);
  -moz-box-shadow:0 0 20px rgba(255,255,255,.6),inset 0 0 20px rgba(255,255,255,1);
  -o-shadow:0 0 20px rgba(255,255,255,.6),inset 0 0 20px rgba(255,255,255,1);
  -ms-shadow:0 0 20px rgba(255,255,255,.6),inset 0 0 20px rgba(255,255,255,1);
  box-shadow:0 0 20px rgba(255,255,255,.6),inset 0 0 20px rgba(255,255,255,1);
}

.gallery_label{
  position:absolute;
  bottom:10px;
  left:50px;
  max-height:133px;
  width:530px;
  color:rgb(255,255,255);
  font-size:13pt;
  background:rgba(24,24,24,0.3);
  .borderRadius(10px);
}
.gallery_label p{
  margin:0px;
}
.gallery_label_title {
  position:relative;
  width:100%;
  height:37px;
  color:rgb(255,255,255);
  font-size:18pt;
  font-weight:bold;
  background:rgba(24,24,24,0.6);
}

.gallery_label_description {
  position:relative;
  width:100%;
}


.comment {
  position:absolute;
  width:~`@{contentWidth}*0.5+'px'`;
  height:100%;
  visibility:hidden;
  opacity : 0;
  top:20px;
  right:0px;
  background:rgba(24,24,24,0.8);
}

.comment textarea{
   position:relative;
   width:~`@{contentWidth}*0.5-100+'px'`;
   margin:5px;
}

.comment-show{
  visibility: visible;
  opacity : 1;
}

.commentUl{
  list-style:none;
  color:rgb(200,200,200);
}

.commentUl li{
  border-bottom:1px dotted rgb(100,100,100);
}

.comment-uname{
  color:rgb(230,120,120);
}

.commentUl dd{
  margin:0px;
}

.commentBtn{
  float:right;
  color:rgb(230,120,120);
}
.commentDate{
  color:rgb(86,86,86);
}

#gallery_toolbar_container{
   position:absolute;
   height: ~`@{cubeHeight}+'px'`;
   width: ~`@{cubeWidth}+'px'`;
   top:40px;
   left:0px;
   display:none;
}
.galleryToolbarBody{
  position : absolute;
  right:0px;
  top:20px;
  width:270px;
  height:220px;
  background:rgba(24,24,24,0.8);
  -webkit-border-radius:110px 0px 0px 110px;
  -moz-border-radius:110px 0px 0px 110px;
  border-radius:110px 0px 0px 110px;
}
.galleryToolbar {
    width : 50px;
    height : 220px;
    position : absolute;
    right : 0px;
    top :  0px;
    
}
.galleryToolbar:hover {
    opacity : 1;
}
.galleryToolbar-transition{
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.galleryToolbar-btn{
    width:48px;
    height:55px;
    background-position:center;
    z-index:999;
}

.galleryToolbar-comment-btn {
    background:url('../images/gallery/comment_normal.png') no-repeat center;
}
.galleryToolbar-comment-btn:hover {
    background:url('../images/gallery/comment.png') no-repeat center;
}
.galleryToolbar-comment-btn-selected{
    background:url('../images/gallery/comment_selected.png') no-repeat center;
}

.galleryToolbar-fav-btn {
    background:url('../images/gallery/fav_normal.png') no-repeat center;
}
.galleryToolbar-fav-btn:hover {
    background:url('../images/gallery/fav.png') no-repeat center;
}
.galleryToolbar-fav-btn-selected{
    background:url('../images/gallery/fav_selected.png') no-repeat center; 
}

.galleryToolbar-info-btn-selected{
    background:url('../images/gallery/info_selected.png') no-repeat center; 
}
.galleryToolbar-info-btn:hover {
    background:url('../images/gallery/info.png') no-repeat center;
}
.galleryToolbar-info-btn {
    background:url('../images/gallery/info_normal.png') no-repeat center;
}
.galleryToolbar-return-btn:hover {
    background:url('../images/gallery/return.png') no-repeat center;
}
.galleryToolbar-return-btn {
    background:url('../images/gallery/return_normal.png') no-repeat center;
}

.gallery_btn{
  position:absolute;
  width:10%;
  height:~`@{cubeHeight}+'px'`;
  opacity :0;
  top:0px;
  cursor:pointer;
}
.gallery_prev_btn{
    left:0px;
    background:url('../images/gallery/prev.png') no-repeat left;
}
.gallery_prev_btn:hover{
  opacity :1;
}

.gallery_next_btn{
    right:0px;
    background:url('../images/gallery/next.png') no-repeat right;
}
.gallery_next_btn:hover{
  opacity :1;
}
.gallery_content {
    width: 100%;
    height: 100%;
    position: absolute;
    background:rgba(19,19,19,1);
    align:center;
    display : block;
}

.gallery_content>img{
    margin-top:auto;
    margin-bottom:auto;
    box-shadow:#333 3px 3px 4px;
    -webkit-box-shadow:#333 3px 3px 4px;
    -moz-box-shadow:#333 3px 3px 4px;
    -o-box-shadow:#333 3px 3px 4px;

}

@thumbWidth:`document.documentElement.clientWidth/5-10`;
.thumb_figure {
  position: absolute;
  margin: 5px 5px 5px 5px;
  width: ~`@{thumbWidth}+'px'`;
  height: 170px;
  border: 1px solid #555;
  overflow: hidden;
  float: right;
}
